@import './layout.scss';

page {
	position: relative;
	background-color: $u-bg-color;
	font-size: 28rpx;
	color: $u-main-color;
	font-family: 'PingFang SC, PingFang SC';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; /* Firefox */
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

view,
scroll-view {
	box-sizing: border-box;
}

image {
	width: 100%;
	height: 100%;
}
button::after {
	display: none;
}

/* 字体文件 这里用@ */
@font-face {
	font-family: YOUSHE;
	src: url('https://jw-h5.malicat.com/static/fonts/YOUSHE-BIAOTIHEI.ttf');
}
.title-black {
	font-family: YOUSHE;
}
@font-face {
	font-family: DINPRO;
	src: url('https://jw-h5.malicat.com/static/fonts/D-DIN-PRO-500-Medium.ttf');
}
.dinpro {
	font-family: DINPRO;
}

$margins: 5, 10, 15, 20, 25, 30, 35, 40;

@each $margin in $margins {
	.ml#{$margin} {
		margin-left: #{$margin}rpx;
	}
	.mr#{$margin} {
		margin-right: #{$margin}rpx;
	}
	.mt#{$margin} {
		margin-top: #{$margin}rpx;
	}
	.mb#{$margin} {
		margin-bottom: #{$margin}rpx;
	}
	.pl#{$margin} {
		padding-left: #{$margin}rpx;
	}
	.pr#{$margin} {
		padding-right: #{$margin}rpx;
	}
	.pt#{$margin} {
		padding-top: #{$margin}rpx;
	}
	.pb#{$margin} {
		padding-bottom: #{$margin}rpx;
	}
}

.font-primary {
	color: $u-primary;
}
.font-error {
	color: $u-error;
}
.font-warning {
	color: $u-warning;
}
.font-info {
	color: $u-tips-color;
}
.font-24 {
	font-size: 24rpx;
}
.font-500 {
	font-weight: 500;
}
.font-600 {
	font-weight: 600;
}
/**
 * 布局 
*/
.fc {
	display: flex;
	align-items: center;
}
.fcc {
	display: flex;
	align-items: center;
	justify-content: center;
}
.fcb {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.flex-col {
	display: flex;
	flex-direction: column;
}
.flex-1 {
	flex: 1;
}

.total {
	padding: 30rpx 30rpx 0;
	// color: $u-tips-color;
	&-text {
		color: $u-primary;
		font-weight: bold;
		padding: 0 6rpx;
		font-size: 32rpx;
	}
}

// 页脚操作框
.footer {
	&-content {
		padding: 24rpx 32rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		z-index: 22;
		box-shadow: 0rpx -8rpx 12rpx 0rpx rgba(0, 17, 83, 0.05);

		&-action {
			display: flex;
			justify-content: space-between;
			align-items: center;

			&-left {
				min-height: 80rpx;
				flex: 1;
			}
		}
	}
}

// 自定义tab选项
.cc-select {
	display: flex;
	flex-wrap: wrap;
	&-item {
		@include center;
		transition: all 0.3s;
		height: 56rpx;
		padding: 0 32rpx;
		border-radius: 28rpx;
		background-color: $u-bg-color;
		border: 2rpx solid transparent;

		&-active {
			background-color: rgba(78, 110, 237, 0.2);
			border-color: $u-primary;
		}
	}
	.cc-select-item + .cc-select-item {
		margin-left: 24rpx;
	}
}

// 描述文本
.error-tips {
	display: flex;
	flex-direction: column;
	background-color: $u-error-light;
	padding: 24rpx 32rpx;
	line-height: 56rpx;
	position: relative;

	&:before {
		position: absolute;
		display: block;
		content: '';
		left: 0;
		top: 0;
		background-color: $u-error;
		height: 100%;
		width: 12rpx;
		z-index: 1;
	}

	&-title {
		color: $u-error;
		font-weight: 500;
	}
}
